From ec981fd237a50dfc547d8c162b22f4e1a691c9fc Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Wed, 6 Dec 2023 21:07:51 -0500
Subject: Improve responsiveness

---
 src/app/groups/[groupId]/expenses/expense-list.tsx |  76 +++++++++++++
 src/app/groups/[groupId]/expenses/page.tsx         | 124 ++-------------------
 2 files changed, 84 insertions(+), 116 deletions(-)
 create mode 100644 src/app/groups/[groupId]/expenses/expense-list.tsx

(limited to 'src/app/groups/[groupId]/expenses')

diff --git a/src/app/groups/[groupId]/expenses/expense-list.tsx b/src/app/groups/[groupId]/expenses/expense-list.tsx
new file mode 100644
index 0000000..0c03756
--- /dev/null
+++ b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -0,0 +1,76 @@
+'use client'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { getGroupExpenses } from '@/lib/api'
+import { cn } from '@/lib/utils'
+import { Participant } from '@prisma/client'
+import { ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+
+type Props = {
+  expenses: Awaited<ReturnType<typeof getGroupExpenses>>
+  participants: Participant[]
+  currency: string
+  groupId: string
+}
+
+export function ExpenseList({
+  expenses,
+  currency,
+  participants,
+  groupId,
+}: Props) {
+  const getParticipant = (id: string) => participants.find((p) => p.id === id)
+  const router = useRouter()
+
+  return expenses.length > 0 ? (
+    expenses.map((expense) => (
+      <div
+        key={expense.id}
+        className={cn(
+          'border-t flex justify-between pl-6 pr-2 py-4 text-sm cursor-pointer hover:bg-slate-50',
+          expense.isReimbursement && 'italic',
+        )}
+        onClick={() => {
+          router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
+        }}
+      >
+        <div>
+          <div className="mb-1">{expense.title}</div>
+          <div className="text-xs text-muted-foreground">
+            Paid by{' '}
+            <Badge variant="secondary">
+              {getParticipant(expense.paidById)?.name}
+            </Badge>{' '}
+            for{' '}
+            {expense.paidFor.map((paidFor, index) => (
+              <Badge variant="secondary" key={index} className="mr-1 mb-1">
+                {participants.find((p) => p.id === paidFor.participantId)?.name}
+              </Badge>
+            ))}
+          </div>
+        </div>
+        <div className="flex items-center">
+          <div className="tabular-nums whitespace-nowrap font-bold">
+            {currency} {expense.amount.toFixed(2)}
+          </div>
+          <Button size="icon" variant="link" className="-my-2" asChild>
+            <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
+              <ChevronRight className="w-4 h-4" />
+            </Link>
+          </Button>
+        </div>
+      </div>
+    ))
+  ) : (
+    <p className="px-6 text-sm py-6">
+      Your group doesn’t contain any expense yet.{' '}
+      <Button variant="link" asChild className="-m-3">
+        <Link href={`/groups/${groupId}/expenses/create`}>
+          Create the first one
+        </Link>
+      </Button>
+    </p>
+  )
+}
diff --git a/src/app/groups/[groupId]/expenses/page.tsx b/src/app/groups/[groupId]/expenses/page.tsx
index 0047b1e..48f355b 100644
--- a/src/app/groups/[groupId]/expenses/page.tsx
+++ b/src/app/groups/[groupId]/expenses/page.tsx
@@ -1,4 +1,4 @@
-import { Badge } from '@/components/ui/badge'
+import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list'
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -8,8 +8,7 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { getGroup, getGroupExpenses } from '@/lib/api'
-import { cn } from '@/lib/utils'
-import { ChevronRight, Plus } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 
@@ -42,119 +41,12 @@ export default async function GroupExpensesPage({
       </div>
 
       <CardContent className="p-0">
-        {expenses.length > 0 ? (
-          expenses.map((expense) => (
-            <div
-              className={cn(
-                'border-t flex justify-between pl-6 pr-2 py-4 text-sm',
-                expense.isReimbursement && 'italic',
-              )}
-            >
-              <div>
-                <div>{expense.title}</div>
-                <div className="text-xs text-muted-foreground">
-                  Paid by{' '}
-                  <Badge variant="secondary">
-                    {
-                      group.participants.find((p) => p.id === expense.paidById)
-                        ?.name
-                    }
-                  </Badge>{' '}
-                  for{' '}
-                  {expense.paidFor.map((paidFor, index) => (
-                    <Badge variant="secondary" key={index} className="mr-1">
-                      {
-                        group.participants.find(
-                          (p) => p.id === paidFor.participantId,
-                        )?.name
-                      }
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-              <div className="flex items-center">
-                <div className="tabular-nums whitespace-nowrap font-bold">
-                  {group.currency} {expense.amount.toFixed(2)}
-                </div>
-                <Button size="icon" variant="link" className="-my-2" asChild>
-                  <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
-                    <ChevronRight className="w-4 h-4" />
-                  </Link>
-                </Button>
-              </div>
-            </div>
-          ))
-        ) : (
-          <p className="px-6 text-sm py-6">
-            Your group doesn’t contain any expense yet.{' '}
-            <Button variant="link" asChild className="-m-3">
-              <Link href={`/groups/${groupId}/expenses/create`}>
-                Create the first one
-              </Link>
-            </Button>
-          </p>
-        )}
-        {/* <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Title</TableHead>
-                <TableHead>Paid by</TableHead>
-                <TableHead>Paid for</TableHead>
-                <TableHead className="text-right">Amount</TableHead>
-                <TableHead className="w-0"></TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {expenses.map((expense) => (
-                <TableRow
-                  key={expense.id}
-                  className={cn(expense.isReimbursement && 'italic')}
-                >
-                  <TableCell>{expense.title}</TableCell>
-                  <TableCell>
-                    <Badge variant="secondary">
-                      {
-                        group.participants.find(
-                          (p) => p.id === expense.paidById,
-                        )?.name
-                      }
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="flex flex-wrap gap-1">
-                    {expense.paidFor.map((paidFor, index) => (
-                      <Badge variant="secondary" key={index}>
-                        {
-                          group.participants.find(
-                            (p) => p.id === paidFor.participantId,
-                          )?.name
-                        }
-                      </Badge>
-                    ))}
-                  </TableCell>
-                  <TableCell className="text-right tabular-nums whitespace-nowrap">
-                    {group.currency} {expense.amount.toFixed(2)}
-                  </TableCell>
-                  <TableCell>
-                    <Button
-                      size="icon"
-                      variant="link"
-                      className="-my-2"
-                      asChild
-                    >
-                      <Link
-                        href={`/groups/${groupId}/expenses/${expense.id}/edit`}
-                      >
-                        <ChevronRight className="w-4 h-4" />
-                      </Link>
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        ) : (
-          <div className="p-6">Your group doesn’t have any expense yet.</div>
-        )} */}
+        <ExpenseList
+          expenses={expenses}
+          groupId={groupId}
+          currency={group.currency}
+          participants={group.participants}
+        />
       </CardContent>
     </Card>
   )
-- 
cgit v1.3